Added the map feature [bug] #28

Kingsuite · 2024-11-28T20:48:09Z

schwepps · 2024-11-29T09:43:13Z

Hey @Kingsuite ! I just checked your PR and I don't see any front dev in the file changes. Only config files modification.
Let me know if you need help.

Kingsuite · 2024-11-30T14:15:56Z

Hey @Kingsuite ! I just checked your PR and I don't see any front dev in the file changes. Only config files modification. Let me know if you need help.

One map is displayed before the list of assets
One pin with the name of the asset is displayed for each project.
The pin is the svg image of the project.
When I hover the pin, the image becomes bigger to be able to read the information (I can't really tell because of pin alignment issues)
When I click on the pin or the image, i'm redirected to the project page

I have updated the files for reproduction. But I noticed some bug with integrating the map in this environment:

I tested on refresh CodeSandBox, and everything seems to be working fine & the pins align well.
My geocodeLocation() function returns the coordinates which I have tested on Google Map & on a React app with this map library and everything works fine.

Kingsuite · 2024-12-01T17:13:35Z

@schwepps have you able to go through it?

schwepps · 2024-12-02T07:50:08Z

@Kingsuite I'm going to review it this morning.

schwepps

@Kingsuite I have added a few comments.
The map is displayed correctly, the coordinates are correctly fetched but the markers are not displayed on the map.
Could you check that please?
Also no need to change the marker on hover if too complicated.

schwepps · 2024-12-02T09:51:47Z

app/components/project/CustomMarker.tsx

+
+function CustomMarker({ item }: CustomMarkerProps) {
+    const id = item?.name.toString().toLowerCase().replace(' ', '_');
+    const image = item?.image_data ? item?.image_data.replaceAll('%23', '#') :


I have checked locally and there is no image_data in item. The attribute is called image.

schwepps · 2024-12-02T09:52:12Z

app/components/project/CustomMarker.tsx

+
+    return (
+        <>
+            {console.log(item, "WTF")}


Can you remove the console.log?

schwepps · 2024-12-02T09:52:28Z

app/components/project/ProjectMap.tsx

+
+                })
+            );
+            console.log(updatedData, "Coordinates");


Can you remove the console.log?

schwepps · 2024-12-02T09:52:51Z

app/components/project/ProjectMap.tsx

+    const mapRef = useRef<maplibregl.Map | null>(null);
+    useEffect(() => {
+        if (mapData) {
+            console.log(filterByName(mapData));


Is there some code missing here instead of the console.log?

No nothing was missing here I was testing the filter function

schwepps · 2024-12-02T09:54:53Z

app/components/project/ProjectMap.tsx

+
+    return mapData.length !== 0 ? <RMap
+        initialCenter={locations[0] == undefined ? [0, 0] : [locations[0].coordinates[0], locations[0].coordinates[1]]}
+        style={{ width: '100%', height: "800px", overflowY: "hidden" }}


Can we make the map height a bit smaller like 16:9 ratio?

Kingsuite · 2024-12-02T10:45:00Z

@schwepps I will revert shortly. I am working on it

Kingsuite · 2024-12-02T11:40:18Z

markers are not displayed on the map.

For this I am still figuring out why it's not working. Because I started afresh a React app with these same library, and it worked perfectly. What if there's an overhead style interfering?

Kingsuite · 2024-12-03T10:34:51Z

@schwepps GM, have you had time to review the updates?

schwepps · 2024-12-03T13:54:01Z

@Kingsuite I think the issues with the markers and the projects images below are due to not having a unique key for each element.
Each project image should have a unique key and the markers, if they are using the same images should also be unique by adding a prefix or a suffix to the key.

Kingsuite · 2024-12-03T15:04:57Z

@Kingsuite I think the issues with the markers and the projects images below are due to not having a unique key for each element. Each project image should have a unique key and the markers, if they are using the same images should also be unique by adding a prefix or a suffix to the key.

I have tried the key, but not so much has changed. I will push in my new observations.

Kingsuite · 2024-12-03T17:38:42Z

This is my observation: https://www.loom.com/share/d4cba707ddf34537bfd7a74f76a8fb1c

@schwepps

schwepps · 2024-12-04T07:50:19Z

Thanks @Kingsuite for the loom.
Let me check if I can figure out what the issue is.

Kingsuite · 2024-12-04T22:13:49Z

Could you check the commits @schwepps I forgot to push the new updates regarding my observation.

schwepps · 2024-12-05T15:47:45Z

@Kingsuite sorry I don't have time today. I'll check tomorrow for sure!

Kingsuite · 2024-12-06T15:30:51Z

@schwepps is there any updates yet.

Kingsuite · 2024-12-09T09:06:41Z

GM @schwepps
Have you had sometime to review my PR.

schwepps · 2024-12-09T11:27:31Z

Hey @Kingsuite.I have reviewed your PR.
I'm not familiar with maplibre so I tried to debug quickly.
Your code should be very close to this code example here in order to work: https://github.com/visgl/react-maplibre/tree/1.0-release/examples/controls/src

The render of this sample code is here: https://visgl.github.io/react-maplibre/examples/controls

Kingsuite · 2024-12-09T11:37:39Z

Hey @Kingsuite.I have reviewed your PR. I'm not familiar with maplibre so I tried to debug quickly. Your code should be very close to this code example here in order to work: https://github.com/visgl/react-maplibre/tree/1.0-release/examples/controls/src

The render of this sample code is here: https://visgl.github.io/react-maplibre/examples/controls

@schwepps I'll give it a try with visgl/react-maplibre. ETA 3-4hrs

Kingsuite · 2024-12-09T15:57:00Z

GM @schwepps under the hood, the map libraries use the same tech, the problem is not coming from whatever library. You could try it yourself from the last commit.

You could also better still make this a different issue. I have attempted to do every single thing.

jedstroke and others added 4 commits November 28, 2024 21:33

added map

cbb6188

Merge branch 'main' of https://github.com/Carbonable/contracts-watcher

02c2b61

feat: added map

1c208d4

Delete .env

9e764ee

Kingsuite changed the title ~~Added the feature [wrapping up on the pin features—the onHover projectDetails]~~ Added the map feature WIP [wrapping up on the pin features—the onHover projectDetails] Nov 28, 2024

schwepps self-requested a review November 29, 2024 09:35

schwepps assigned Kingsuite Nov 29, 2024

Kingsuite added 3 commits November 30, 2024 14:35

Merge branch 'main' of https://github.com/Carbonable/contracts-watcher

4303e80

Merge branch 'main' of https://github.com/Kingsuite/contracts-watcher

bb2a3e6

changes: tsconfig.json

321ebc1

Kingsuite changed the title ~~Added the map feature WIP [wrapping up on the pin features—the onHover projectDetails]~~ Added the map feature WIP [bug] Nov 30, 2024

Kingsuite changed the title ~~Added the map feature WIP [bug]~~ Added the map feature [bug] Nov 30, 2024

schwepps reviewed Dec 2, 2024

View reviewed changes

changes: reverting

1a8e837

julienbrs requested review from schwepps and removed request for schwepps December 3, 2024 09:43

change: observation

c55ce41

change: nothing changed same observation

19aabfb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added the map feature [bug] #28

Added the map feature [bug] #28

Kingsuite commented Nov 28, 2024

schwepps commented Nov 29, 2024

Kingsuite commented Nov 30, 2024

Kingsuite commented Dec 1, 2024

schwepps commented Dec 2, 2024

schwepps left a comment

schwepps Dec 2, 2024

schwepps Dec 2, 2024

schwepps Dec 2, 2024

schwepps Dec 2, 2024

Kingsuite Dec 2, 2024

schwepps Dec 2, 2024

Kingsuite commented Dec 2, 2024

Kingsuite commented Dec 2, 2024 •

edited

Loading

Kingsuite commented Dec 3, 2024

schwepps commented Dec 3, 2024 •

edited

Loading

Kingsuite commented Dec 3, 2024

Kingsuite commented Dec 3, 2024 •

edited

Loading

schwepps commented Dec 4, 2024

Kingsuite commented Dec 4, 2024

schwepps commented Dec 5, 2024

Kingsuite commented Dec 6, 2024

Kingsuite commented Dec 9, 2024

schwepps commented Dec 9, 2024

Kingsuite commented Dec 9, 2024

Kingsuite commented Dec 9, 2024

Added the map feature [bug] #28

Are you sure you want to change the base?

Added the map feature [bug] #28

Conversation

Kingsuite commented Nov 28, 2024

schwepps commented Nov 29, 2024

Kingsuite commented Nov 30, 2024

Kingsuite commented Dec 1, 2024

schwepps commented Dec 2, 2024

schwepps left a comment

Choose a reason for hiding this comment

schwepps Dec 2, 2024

Choose a reason for hiding this comment

schwepps Dec 2, 2024

Choose a reason for hiding this comment

schwepps Dec 2, 2024

Choose a reason for hiding this comment

schwepps Dec 2, 2024

Choose a reason for hiding this comment

Kingsuite Dec 2, 2024

Choose a reason for hiding this comment

schwepps Dec 2, 2024

Choose a reason for hiding this comment

Kingsuite commented Dec 2, 2024

Kingsuite commented Dec 2, 2024 • edited Loading

Kingsuite commented Dec 3, 2024

schwepps commented Dec 3, 2024 • edited Loading

Kingsuite commented Dec 3, 2024

Kingsuite commented Dec 3, 2024 • edited Loading

schwepps commented Dec 4, 2024

Kingsuite commented Dec 4, 2024

schwepps commented Dec 5, 2024

Kingsuite commented Dec 6, 2024

Kingsuite commented Dec 9, 2024

schwepps commented Dec 9, 2024

Kingsuite commented Dec 9, 2024

Kingsuite commented Dec 9, 2024

Kingsuite commented Dec 2, 2024 •

edited

Loading

schwepps commented Dec 3, 2024 •

edited

Loading

Kingsuite commented Dec 3, 2024 •

edited

Loading